<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <image src="http://xcxtp.njmswl.com/images/goBack.png" class="goBack" @tap="goBack" />
    <text class="title">我要出租</text>
  </view>
  <scroll-view class="scroll-view" scroll-y>
    <view class="wrapper">
      <image src="http://xcxtp.njmswl.com/images/hire.png" class="hireImg" />
      <view class="content">
        <view class="contentItem">
          <label for="houseName" class="houseNameText">小区名称</label>
          <input
            id="houseName"
            class="inputStyle"
            type="text"
            placeholder="请输入小区名称"
            placeholder-class="placeholderStyle"
            v-model="houseName"
          />
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="acceptPrice" class="houseNameText">理想价格</label>
          <input
            id="acceptPrice"
            class="inputStyle"
            type="text"
            placeholder="请输入"
            placeholder-class="placeholderStyle"
            v-model.number="acceptPrice"
          />
          <view class="unit">万元</view>
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personName" class="houseNameText">如何称呼您</label>
          <input
            id="personName"
            class="inputStyle"
            type="text"
            placeholder="请输您的名字"
            placeholder-class="placeholderStyle"
            v-model="personName"
          />
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personTel" class="houseNameText">联系方式</label>
          <input
            id="personTel"
            class="inputStyle"
            type="text"
            placeholder="请输入您的手机号码"
            placeholder-class="placeholderStyle"
            v-model="personTel"
          />
        </view>
      </view>
      <view class="send" @click="publish">立即发布</view>
      <view class="content1"  @click="openMiniProgram">
        <image class="img" src="http://xcxtp.njmswl.com/images/index/shop.png" />
        <text class="openTitle">我也要开通小程序</text>
      </view>
      <view class="support"><text>技术支持：推量科技</text></view>
    </view>
  </scroll-view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import OpenProgram from '../components/openProgram.vue'
import { computed } from 'vue'
import { onLoad,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { getHireAPI } from '@/services/hire'
const menu = ref({})
onMounted(() => {
  menu.value = uni.getMenuButtonBoundingClientRect()
  // console.log(menu.value)
})
//uniapp微信小程序分享页面到微信好友
onShareAppMessage(()=>{

})
//uniapp微信小程序分享页面到微信朋友圈

onShareTimeline(()=>{

})
const goBack = () => {
  uni.switchTab({
    url: '/pages/index/index'  // 这里的url是你首页的路径，根据你的项目实际情况进行修改
});
};

const openMiniProgram = ()=>{
  console.log('da');
  uni.navigateTo({ url: '/pages/simplePage/openMiniProgram' })
}
const houseName = ref('')
const acceptPrice = ref('')
const personName = ref('')
const personTel = ref('')
const publish = async () => {
  if (!houseName.value) {
    uni.showToast({
      title: '请输入小区名称',
      icon: 'none',
    })
  } else if (!acceptPrice.value) {
    uni.showToast({
      title: '请输入理想价格',
      icon: 'none',
    })
  } else if (!personName.value) {
    uni.showToast({
      title: '请输入您的姓名',
      icon: 'none',
    })
  } else if (!personTel.value) {
    uni.showToast({
      title: '请输入您的联系方式',
      icon: 'none',
    })
  } else {
    const res = await getHireAPI({
      id: 22540,
      name: houseName.value,
      price: acceptPrice.value,
      appellation: personName.value,
      phone: personTel.value,
      sellType: 0,
    })
    if (res.code === 0) {
      uni.showToast({
        title: '发布成功！',
        icon: 'success',
      })
    }
  }
}
</script>
<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
  background-color: #f4f5fc;
}
.navbar {
  padding-left: 28rpx;
  padding-right: 37rpx;
  padding-bottom: 47rpx;
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  display: flex;
  align-items: center;
  .goBack {
    width: 18rpx;
    height: 30rpx;
    margin-left: 28rpx;
    margin-top: 7rpx;
  }

  .title {
    margin:0 auto;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.wrapper {
  position: relative;
  height: 1200rpx;
  background-color: #f4f5fc;

  .hireImg {
    width: 100%;
    height: 373.3rpx;
  }

  .support {
    position: absolute;
    top: 994rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }

  .content {
    position: absolute;
    top: 284rpx;
    margin-left: 27rpx;
    width: 694rpx;
    height: 440rpx;
    background: #ffffff;
    border-radius: 25rpx;

    .contentItem {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      height: 109rpx;
      padding-left: 25rpx;
      padding-right: 24rpx;
      // line-height: 109rpx;

      .line {
        position: absolute;
        width: 646rpx;
        height: 1rpx;
        bottom: 0;
        border-bottom: 1rpx solid rgba(229, 229, 229, 0.75);
      }

      .houseNameText {
        width: 170rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }

      .inputStyle {
        padding: 0;
        margin: 0;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }

      .placeholderStyle {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #989999;
      }

      .unit {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        margin-left: auto;
      }
    }
  }

  .send {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 770rpx;
    margin-left: 27rpx;
    width: 695rpx;
    height: 100rpx;
    background: #3bc48c;
    border-radius: 50rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
  }

  .content1 {
    position: absolute;
    top: 912rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 261rpx;
    height: 61rpx;
    margin-bottom: 21rpx;
    background: #3bc48c;
    border-radius: 30rpx;

    .img {
      width: 28rpx;
      height: 26rpx;
    }

    .openTitle {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }
}
</style>
